<template>
  <div>
    <el-dialog
      title="确认出库"
      @close="handleClose2"
      :visible.sync="dialogVisible2"
      width="800px">
      <div style="max-height:500px;overflow: auto">
        <div v-for="(item,index) in sendList" style="border-bottom:1px solid #eee;padding:20px 0;margin-bottom:10px;">
          <div style="font-size:14px;font-weight: bold;margin-bottom:10px;overflow: hidden">
            {{item.goodsSn}}
            <el-button size="mini" style="float:right;" type="primary" @click="handleConfirm2(item,index)" :loading="item.btnloading">提 交</el-button>
          </div>
          <el-table :ref="`multipleTable${index}`"
                    row-key="dgId"
                    :data="item.deliverList"
                    style="width: 95%;font-size: 12px;margin:0 auto"
                    @selection-change="(selection)=>handleSelectionChange(selection,index)"
                    v-loading="listLoading2"
                    border>
            <el-table-column type="selection" :reserve-selection="true" width="60" align="center" :selectable="checkSelectable"></el-table-column>
            <el-table-column label="发货单号" align="center" width="150">
              <template slot-scope="scope">
                {{scope.row.deliverSn}}
              </template>
            </el-table-column>
            <el-table-column label="销售单号" align="center" width="150">
              <template slot-scope="scope">
                {{scope.row.orderSn}}
              </template>
            </el-table-column>
            <el-table-column label="商品信息" >
              <template slot-scope="scope">
                {{scope.row.goodsName}}
              </template>
            </el-table-column>
            <el-table-column label="发货数量" align="center">
              <template slot-scope="scope">
                {{scope.row.shipNum}}
              </template>
            </el-table-column>
            <el-table-column label="未核减数量" align="center">
              <template slot-scope="scope">
                {{scope.row.unPlanNum}}
              </template>
            </el-table-column>
            <el-table-column label="送货类型" align="center">
              <template slot-scope="scope">
                {{scope.row.sendType}}
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 95%;font-size: 12px;margin:20px auto 0 auto">
            <div>需核减数量：<span style="font-size:14px;font-weight: bold">{{item.planNum}}</span> 吨 <span style="padding-left:20px">已选核减数量：<span style="color:#409EFF;font-weight: bold;font-size:14px">{{item.chooseUnPlanNum}}</span> 吨</span></div>
            <div style="color:red;font-size:12px;margin-top:10px">说明：如果已选核减数量大于需核减数量，将按照选择的发货单顺序逐一核减，多出的发货数量将不会被核减</div>
          </div>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import "@/utils/jQuery.print"
import {formatDate} from '@/utils/date';
import {planGoodsOperate,getDeliverGoods} from "../../api/order";

export default {
  name: "printdischarging",
  data(){
    return {
      dialogVisible2:false,
      sendList:[],
      selectList:[],
      listLoading2:false,
      curItem: {},
      chooseUnPlanNum:0,//已选核减数量
      PlanNum:0,//需核减数量

    }
  },

  filters:{

  },

  created() {

  },

  methods:{

    //判断是否能选择
    checkSelectable(row, index){
      let flag = true;
      if( parseFloat(row['unPlanNum']) == 0){
        flag = false
      }
      return flag
    },

    //显示确认发货弹窗
    showDialogVisible(item){
      this.dialogVisible2 = true;
      this.curItem = item;
      this.getChooseList(item);
    },

    //关闭确认发货弹窗
    handleClose2(){
      this.sendList.forEach((el,i)=>{
        let name = 'multipleTable'+i;
        this.$refs[name][0].clearSelection();

      })
      this.dialogVisible2 = false;
    },

    /**
     *获取选择发货单列表
     **/
    getChooseList(item) {
      this.listLoading2 = true;
      let pbgIds = [];
      if(item.billGoods){
        item.billGoods.forEach((el)=>{
          pbgIds.push(el.pbgId)
        })
      }else{
        item.takeGoodsList.forEach((el)=>{
          pbgIds.push(el.pbgId)
        })
      }

      getDeliverGoods({pbgIds:pbgIds}).then(response => {
        this.listLoading2 = false;
        this.sendList = response;
        this.sendList.forEach((el,index)=>{
          let c = JSON.parse(JSON.stringify(el));
          c.selectList = [];
          c.chooseUnPlanNum = 0;
          c.btnloading = false;
          this.$set(this.sendList,index,c)
        })
      });
    },

    //切换选择发货单
    handleSelectionChange(val,index){
      console.log(val,index)
      this.sendList[index].selectList = JSON.parse(JSON.stringify(val));
      this.countUnPlanNum(index);
    },

    //计算已选中发货单的未核减数量
    countUnPlanNum(index){
      let chooseUnPlanNum = 0;
      this.sendList[index].selectList.forEach((el)=>{
        chooseUnPlanNum = chooseUnPlanNum + parseFloat(el.unPlanNum)
      });
      let c = JSON.parse(JSON.stringify(this.sendList[index]));
      c.chooseUnPlanNum = chooseUnPlanNum.toFixed(4)
      this.$set(this.sendList,index,c)
      console.log(this.sendList)
    },

    //提交确认的发货单
    handleConfirm2(item,index){
      if(item.selectList.length > 0){
        let data = {};
        data.pbgId = item.pbgId;
        let dgIds = [];
        item.selectList.forEach((el)=>{
          dgIds.push(el.dgId)
        });
        data.dgIds = dgIds.join(",")
        this.$set(this.sendList[index], 'btnloading',true)
        planGoodsOperate(data).then(response=>{
          this.$message({
            message: '操作成功',
            type: 'success',
            duration:1000
          });
          this.$set(this.sendList[index], 'btnloading',false)
          this.handleClose2();
          this.showDialogVisible(this.curItem)
          this.$emit('refresh',this.curItem.billId)
        });
      }else{
        this.$set(this.sendList[index], 'btnloading',false)
        this.$message({
          message: '请选择要核减的发货单',
          type: 'info',
          duration:1000
        });
      }
    },
  },
}
</script>

<style scoped lang="scss">
    .chexing-con{
      .chexing-title{
          font-weight: bold;
          font-size:14px;
          margin-bottom:10px;
      }
      .chexing-item-list{
        overflow: hidden;
        .chexing-item{
          display: inline-block;
          width:80px;
          height:30px;
          line-height: 30px;
          background: #eee;
          text-align: center;
          color:#666;
          margin-right:10px;
          margin-bottom:10px;
          cursor: pointer;
        }
        .chexing-item.choose{
          background: #f56c6c;
          color:#fff
        }

      }
    }
</style>
